<template>
	<LearnHeader @addItem="addItem"></LearnHeader>
	<LearnMain :list="showList" @delItem="remove" />
	<LearnFooter :status="status" :lastLength="lastLength" @updateStatus="updateStatus" @updateKeyword="updateKeyword" />
</template>

<script>
	import LearnHeader from './components/LearnHeader.vue'
	import LearnMain from './components/LearnMain.vue'
	import LearnFooter from './components/LearnFooter.vue'
	export default {
		components: {
			LearnHeader,
			LearnMain,
			LearnFooter
		},

		data() {
			return {
				status: 'all', //all not finish
				keyword: '',
				// 学习计划列表数据
				list: [{
						id: '1',
						subject: 'Vue.js前端实战开发',
						content: '学习指令，例如v-if、v-for、v-model等',
						place: '自习室',
						status: false,
					},
					{
						id: '2',
						subject: 'SpringBoot实战开发',
						content: '过滤器、拦截器等',
						place: '机房',
						status: false,
					},
					{
						id: '3',
						subject: 'SpringBoot实战开发3333',
						content: '过滤器、拦截器等3333',
						place: '机房',
						status: false,
					},
				]
			}
		},

		computed: {
			// 未完成记录数量
			lastLength() {
				return this.list.filter(item => item.status === false).length
			},
			showList() {
				if (this.status === 'all') {
					return this.list.filter(item =>
						item.subject.includes(this.keyword) || item.content.includes(this.keyword) || item.place.includes(this
							.keyword))
				}
				if (this.status === 'not') {
					return this.list.filter(item => item.status === false && (item.subject.includes(this.keyword) || item.content
						.includes(this.keyword) || item.place.includes(this.keyword)))
				}
				if (this.status === 'finish') {
					return this.list.filter(item => item.status === true && (item.subject.includes(this.keyword) || item.content
						.includes(this.keyword) || item.place.includes(this.keyword)))
				}
			}
		},

		methods: {
			remove(id) {
				this.list = this.list.filter(item => item.id !== id)
			},

			addItem(subject, content, selectedOption) {
				// 生成学习计划记录的id值,数组中最大id值+1
				let nextId = Math.max(...this.list.map(item => item.id)) + 1
				// 学习计划表添加记录
				this.list.push({
					id: nextId,
					subject: subject,
					content: content,
					place: selectedOption,
					status: false,
				})
			},
			updateStatus(status) {
				this.status = status
			},
			updateKeyword(keyword) {
				this.keyword = keyword
			}
		}

	}
</script>

<style>
</style>